import React, { useEffect, useState } from "react";
import { PageHeader, Form, Input, InputNumber, Button } from "antd";
import { useHistory } from "react-router-dom";
import axios from "axios";

export default function Compile() {
  let history = useHistory();
  const [datas, setDatas] = useState("");
  useEffect(() => {
    axios.get("http://localhost:3004/From_data").then((res) => {
      setDatas(...res.data);
    });
  }, [datas]);

  const layout = {
    labelCol: {
      span: 8,
    },
    wrapperCol: {
      span: 16,
    },
  };
  /* eslint-disable no-template-curly-in-string */

  const validateMessages = {
    required: "${label} is required!",
    types: {
      email: "${label} is not a valid email!",
      number: "${label} is not a valid number!",
    },
    number: {
      range: "${label} must be between ${min} and ${max}",
    },
  };
  /* eslint-enable no-template-curly-in-string */

  const onFinish = (values) => {
    console.log("values",datas.id);
  };
  return (
    <div>
      <PageHeader
        className="site-page-header"
        onBack={() => history.go(-1)}
        title="编辑"
      />
      <Form
        {...layout}
        style={{ width: "500px", margin: "50px auto" }}
        name="nest-messages"
        onFinish={onFinish}
        // initialValues={{ username:`${datas.id}`}}
        validateMessages={validateMessages}
      >
        <Form.Item
          name={"username"}
          label="商品名称"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name={["user", "price"]}
          label="商品价格(元)"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name={["user", "weight"]}
          label="商品重量"
          rules={[
            {
              required: true,
              type: "number",
              min: 0,
              max: 1000,
            },
          ]}
        >
          <InputNumber />
        </Form.Item>
        <Form.Item
          wrapperCol={{ ...layout.wrapperCol, offset: 8 }}
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}
